<template>
  <div class="home">
    <home-head></home-head>
    <div class="homeContent">
      <home-sentence
        v-for="(item, key) in sentencePraiseList"
        :key="key"
        :item="item">
      </home-sentence>
    </div>
    <div class="pageComponent">
      <el-pagination
        :hide-on-single-page="true"
        background
        :current-page='Number(pn) || 1'
        layout="prev, slot, next"
        :page-size='20'
        @current-change="goCurrentPage"
        :total="sentencePraiseCount">
        <div class="pagerInfo">
            <button>{{Number(pn) || 1}} / {{sentencePraiseTotalPage}}</button>
        </div>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import homeHead from '~/components/layout/homeHead.vue'
import homeSentence from '~/components/module/homeSentence.vue'
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
    layout: 'current',
    watchQuery: ['pn'],
    scrollToTop: true,
    async asyncData({ store, query }) {
      let pn = query.pn || 1;
      await store.dispatch('sentence/getPraiseList', {
        pn
      });
      return {
        pn
      }
    },
    data() {
      return {
        fileList: [],
        url: ''
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
      ...mapGetters('sentence', ['sentencePraiseList', 'sentencePraiseCount', 'sentencePraiseTotalPage'])
    },
    components: {
      homeHead, homeSentence
    },
    methods: {
      goCurrentPage(pn) {
        let linkPath = {
          path: this.$route.path,
          query: {
            pn
          }
        };
        this.$router.push(linkPath);
      }
    }
}
</script>
